<template>
  <div>
    <grid-layout
      :layout.sync="data.list"
      :col-num="24"
      :row-height="10"
      :is-draggable="false"
      :is-resizable="false"
      :is-mirrored="false"
      :vertical-compact="true"
      :margin="[0, 0]"
      :use-css-transforms="true"
      :style="data.config.percent ? {height: '100%'} : {}"
    >
      <a-affix v-if="affixItem" ref="affix" :target="getAffixTarget">
        <div class="vue-grid-item-affix" :style="{ paddingBottom: '6px'}" v-show="isShow">
          <generate-layout-form-item :element="affixItem" :stores="stores" v-bind="$attrs" v-on="$listeners" :style="{height: (affixItem.h * 10) + 'px'}"/>
        </div>
        <div v-if="affixItem.fold" class="vue-layout-view-affix-close" @click="isShow = !isShow" :style="isShow ? {top: '-25px'} : {}">
          <ych-icon :type="isShow ? 'icon-shuangjiantou-shang' : 'icon-shuangjiantou-xia'"/>
        </div>
      </a-affix>
      <grid-item
        v-for="item in data.list"
        v-if="!affixItem || affixItem.key !== item.key"
        :x="item.x"
        :y="item.y - (affixItem ? (affixItem.h) : 0)"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :key="item.key"
        :style="data.config.percent ? {height: item.h + '%'} : {}"
      >
        <div
          class="box-card-container"
          :style="{ paddingRight: item.x + item.w === 24 ? '0px' : '6px', paddingBottom: data.config.percent && item.h === 100 ? '0px' : '6px'}"
        >
          <generate-layout-form-item :element="item" :stores="stores" v-bind="$attrs" v-on="$listeners"/>
        </div>
      </grid-item>
    </grid-layout>
  </div>
</template>

<script>

import GenerateLayoutFormItem from './GenerateLayoutFormItem';
import VueGridLayout from 'vue-grid-layout';
import './styles/cover.less';

export default {
  name: 'GenerateLayoutForm',
  components: {
    GenerateLayoutFormItem,
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
  },
  props: {
    data: Object,
    stores: {
      type: Object,
      default: () => {
        return {}
      }
    },
  },
  data() {
    return {
      affixItem: null,
      rootRef: null,
      isShow: true,
    };
  },
  created() {
    if (this.data.config.percent) {
      return
    }
    for (let i = 0; i < this.data.list.length; i++) {
      const item = this.data.list[i]
      if (item.affixEnable) {
        this.affixItem = item;
        break
      }
    }
  },
  mounted() {
    if (this.affixItem) {
      this.$nextTick(() => {
        this.rootRef = this.getRootRef(this.$refs.affix.$el)
      })
    }
  },
  computed: {
    getAffixTarget() {
      if (this.rootRef) {
        return () => this.rootRef
      } else {
        return () => window
      }
    },
  },
  methods: {
    getRootRef(el) {
      if (!el) {
        return el;
      }
      if (el.className && (el.className.indexOf('ant-modal-body') !== -1) || el.className === 'main') {
        return el;
      }
      return this.getRootRef(el.parentNode);
    }
  }
};
</script>

<style lang="less">
.vue-grid-layout {
  min-height: 300px;

  .vue-grid-item-content {
    // 添加投影
    box-shadow: rgba(25, 0, 255, 0.1) 0 2px 6px 0;
  }

  .vue-grid-item {
    overflow: hidden;

    .box-card-container {
      width: 100%;
      height: 100%;

      .fm-widget-col-list {
        height: 100%;
      }
    }
  }
}

.vue-grid-item-affix {
  background-color: rgb(236, 236, 236);
}

// 关闭控件属性面板按钮
.vue-layout-view-affix-close {
  z-index: 999;
  position: relative;
  float: right;
  width: 50px;
  height: 20px;
  text-align: center;
  background-color: #1890ff;
  opacity: 0.5;
  cursor: pointer;
  border-radius: 5px 5px;
  font-size: 16px;
}
</style>
